<template>
  <el-cascader
    ref="areaCascaderRef"
    v-model="selectedArea"
    :options="areaOptions"
    :props="cascaderProps"
    placeholder="选择市-区-镇（省级自动展开）"
    clearable
    style="width: 100%"
    @change="handleAreaChange"
  >
    <!-- 自定义节点模板：隐藏省级单选框 -->
    <template #default="scope">
      <div class="cascader-node-wrap">
        <!-- 仅市（level=1）、区（level=2）、镇（level=3）显示单选框 -->
        <el-radio
          v-if="scope.node.level >= 1"
          :value="scope.node.value"
          @click.stop="handleRadioClick(scope.node)"
          :class="{ 'is-checked': isNodeSelected(scope.node) }"
        ></el-radio>
        <!-- 节点文本 -->
        <span class="node-text">{{ scope.node.nodeText }}</span>
      </div>
    </template>
  </el-cascader>
</template>

<script>
export default {
  name: "ProvinceCityAreaTownRadioCascader",
  data() {
    return {
      selectedArea: [], // 单选选中值（格式：[省ID, 市ID, 区ID, 镇ID]）
      areaOptions: [], // 顶层数据（仅省级）
      cascaderProps: {
        lazy: true,
        lazyLoad: this.loadChildData,
        checkStrictly: true, // 允许选择任意层级
        label: "nodeText",
        value: "nodeId",
        children: "children",
        loadingIcon: "el-icon-loading",
        expandTrigger: "hover", //  hover展开子级，提升体验
        emitPath: false // 关闭默认勾选同步，避免冲突
      }
    };
  },
  mounted() {
    this.initProvinceData();
    // 初始化后自动展开省级节点（用户无感知）
    this.$nextTick(() => this.expandProvinceNode());
  },
  methods: {
    /**
     * 初始化省级数据（省级level=0，隐藏勾选框）
     */
    initProvinceData() {
      setTimeout(() => {
        this.areaOptions = [
          {
            nodeId: "320000",
            nodeText: "江苏省",
            hasChildren: true,
            level: 0, // 显式定义层级
            checkable: false // 隐藏勾选框
          }
        ];
      }, 500);
    },

    /**
     * 懒加载子级数据（给子级定义层级：市=1，区=2，镇=3）
     */
    loadChildData(node, resolve) {
      const parentId = node.value || node.nodeId;
      node.loading = true;
    //   const parentLevel = node.level || 0; // 父级层级

      setTimeout(() => {
        let childData = [];

        // 省（level=0）→ 市（level=1）
        if (parentId === "320000") {
          childData = [
            { nodeId: "320100", nodeText: "南京市", hasChildren: true, level: 1 },
            { nodeId: "320500", nodeText: "苏州市", hasChildren: true, level: 1 }
          ];
        }

        // 市（level=1）→ 区（level=2）
        else if (parentId === "320100") {
          childData = [
            { nodeId: "320102", nodeText: "玄武区", hasChildren: true, level: 2 },
            { nodeId: "320104", nodeText: "秦淮区", hasChildren: true, level: 2 }
          ];
        }

        // 区（level=2）→ 镇（level=3）
        else if (parentId === "320102") {
          childData = [
            { nodeId: "320102001", nodeText: "梅园新村街道", hasChildren: false, level: 3 },
            { nodeId: "320102002", nodeText: "新街口街道", hasChildren: false, level: 3 }
          ];
        }

        childData = childData.map(item => ({
          ...item,
          children: item.hasChildren ? [] : null,
          checkable: false // 隐藏默认勾选框，用自定义Radio替代
        }));

        resolve(childData);
        node.loading = false;
      }, 600);
    },

    /**
     * 自动展开省级节点
     */
    expandProvinceNode() {
      const cascader = this.$refs.areaCascaderRef;
      if (cascader?.panel) {
        const provinceNode = cascader.panel.nodes.find(n => n.nodeId === "320000");
        provinceNode && provinceNode.expand();
      }
    },

    /**
     * 判断节点是否选中（控制Radio状态）
     */
    isNodeSelected(node) {
      // 按层级匹配选中值：市→索引1，区→索引2，镇→索引3
      return this.selectedArea[node.level] === node.nodeId;
    },

    /**
     * 点击Radio更新选中值
     */
    handleRadioClick(node) {
      const newSelected = [...this.selectedArea];
      newSelected[node.level] = node.nodeId;
      // 清空当前层级之后的选中值（如选市后，清空区、镇）
      newSelected.splice(node.level + 1);
      this.selectedArea = newSelected;
    },

    /**
     * 对外传递选中值（过滤省ID，输出[市ID, 区ID, 镇ID]）
     */
    handleAreaChange(val) {
      const result = val.length > 1 ? val.slice(1) : [];
      console.log("选中的市-区-镇ID：", result);
      this.$emit("areaChange", result);
    }
  }
};
</script>

<style scoped>
/* 隐藏默认勾选框容器（避免与自定义Radio重叠） */
.el-cascader-node__checkbox {
  display: none !important;
}

/* 自定义节点布局：Radio与文本对齐 */
.cascader-node-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

/* Radio样式微调 */
.el-radio {
  font-size: 14px;
  cursor: pointer;
}

/* 节点文本样式 */
.node-text {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
</style>